<template>
	<el-dialog title="编辑销售SKU信息" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1100px">
		<div class="form-box">
			<el-form ref="form" :model="form" :rules="rules" label-width="110px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="商品名称" prop="productName">
							<el-input v-model="form.productName" placeholder="填写商品名称" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="SKU名称" prop="skuName">
							<el-input v-model="item.skuName" placeholder="填写sku名称" clearable></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="展示分类" prop="showTypeId">
							<el-cascader v-model="showTypeId" :options="categoryTree" :props="{ value: 'id', label: 'categoryName' }" @change="changeCategory" placeholder="选择分类" style="width: 100%;"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="sku图片" prop="skuThumbImage">
							<el-card shadow="hover" class="el-card-logo">
								<el-image :src="mainImage">
									<div slot="error" class="image-slot">
										<i>选择图片</i>
									</div>
								</el-image>
							</el-card>
							
							<div style="margin-top: 12px;">
								<el-button type="primary" plain @click="addPic" icon="md-add"> 选择图片 </el-button>
								<span style="color: red; margin-left: 20px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</span>
							</div>
							<keep-alive>
								<uploadImage :pageStatus="isPic" @on-change="onPicChange" @on-result="onPicResult" :pageData="imgType" @on-click="addPic"></uploadImage>
							</keep-alive>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item label="分享海报" prop="posterUrl">
							<el-card shadow="hover" class="el-card-logo">
								<el-image :src="posterUrl">
									<div slot="error" class="image-slot">
										<i>选择图片</i>
									</div>
								</el-image>
							</el-card>
							
							<div style="margin-top: 12px;">
								<el-button type="primary" plain @click="addPost" icon="md-add"> 选择图片 </el-button>
								<span style="color: red; margin-left: 20px;">温馨提示：请上传PNG、JPG格式的图片，大小不超过2M。</span>
							</div>
							<keep-alive>
								<uploadImage :pageStatus="isPost" @on-change="onPostChange" @on-result="onPostResult" :pageData="imgType" @on-click="addPost"></uploadImage>
							</keep-alive>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<div slot="footer">
			<el-button type="primary" @click="submit">保 存</el-button>
			<el-button @click="close">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { editProductSkuSaleInfo } from '@api/product/productSkuSale'
	import { findCategoryTree } from '@api/product/productCategoryFront'
	import uploadImage from '../../common/uploadImage'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		components: {
			uploadImage
		},
		data() {
			return {
				form: {
					id: '',
					productName: '',
					skuName: '',
					showTypeId: '',
					showType: '',
					skuThumbImage: '',
					posterUrl: '',
				},
				rules: {
					productName: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
					skuName: [{ required: true, message: '请填写sku名称', trigger: 'blur' }],
					showTypeId: [{ required: true, message: '请选择展示分类', trigger: 'blur' }],
					couponAmount: [{ required: true, message: '请填写需要调整的券抵扣金额', trigger: 'blur' }],
					skuThumbImage: [{ required: true, message: '请上传sku图片', trigger: 'blur' }],
				},
				
				categoryTree: [],
				showTypeId: [],
				
				isPic: false,
				imgType: 0,
				mainImage: '',
				
				isPost: false,
				posterUrl: '',
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.initForm();
				}
			},
		},
		methods: {
			initForm() {
				this.form.id = this.item.id;
				this.form.productName = this.item.productName;
				this.form.skuName = this.item.skuName;
				this.form.showTypeId = this.item.showTypeId;
				this.form.showType = this.item.showType;
				this.form.skuThumbImage = this.item.skuThumbImage;
				this.form.posterUrl = this.item.posterUrl;
				
				this.mainImage = this.item.skuThumbImage;
				this.posterUrl = this.item.posterUrl;
				
				this.getFrontCategoryList();
			},
			
			getFrontCategoryList() { // 获取展示分类
				findCategoryTree({ parentId: 0 })
					.then(res => {
						// 调用递归方法，去除级联数据后将数据赋值给级联选择器
						this.categoryTree = this.dealTreeData(res.data);
						
						for(let i = 0; i < this.categoryTree.length; i++) {
							for(let j = 0; j < this.categoryTree[i].children.length; j++) {
								if(this.categoryTree[i].children[j].id == this.form.showTypeId) {
									this.showTypeId = [this.categoryTree[i].id, this.categoryTree[i].children[j].id];
								}
							}
						}
					})
					.catch(err => {
						console.log('err', err)
					})
			},
			dealTreeData(data) { // 分类数据整理
				for (var i = 0; i < data.length; i++) {
					if (data[i].children == 'null' || data[i].children.length < 1) {
						// children若为空数组，则将children设为undefined
						data[i].children = undefined;
					} else {
						// children若不为空数组，则继续 递归调用 本方法
						this.dealTreeData(data[i].children);
					}
				}
				return data;
			},
			changeCategory(value) { // 选择销售分类
				this.form.showTypeId = value[1];
				
				this.categoryTree.forEach(item1 => {
					if(item1.id == value[0]) {
						item1.children.forEach(item2 => {
							if(item2.id == value[1]) {
								this.form.showType = item2.categoryName;
							}
						})
					}
				})
			},
			
			addPic(row) {
				this.imgType = 3;
				this.isPic = !this.isPic;
			},
			onPicChange(val) {
				this.isPic = val; // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			onPicResult(val) {
				console.log(val)
				this.mainImage = val.mainImage;
				this.form.skuThumbImage = val.mainImage;
			},
			
			addPost(row) {
				this.imgType = 3;
				this.isPost = !this.isPost;
			},
			onPostChange(val) {
				this.isPost = val; // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			onPostResult(val) {
				console.log(val)
				this.posterUrl = val.mainImage;
				this.form.posterUrl = val.mainImage;
			},
			
			submit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						editProductSkuSaleInfo(this.form)
							.then(() => {
								this.$message.success('信息修改成功！');
								this.close();
								
								this.$emit('submit');
							})
					}
				})
			},
			
			reset() {
				this.$refs.form.resetFields();
			},
			close() {
				this.$emit('close');
				this.reset();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 20px;
	}
	
	.el-card-logo {
		height: 256px !important;
		width: 256px !important;
		::v-deep .el-card__body {
			height: 254px !important;
			width: 254px !important;
			padding: 0px !important;
		}
	}
</style>